<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>文件上传</title>
    <link rel="stylesheet" th:href="@{/myconfig/layui/css/layui.css}" media="all">
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>
<form class="layui-form" action="/fileoper/upload" enctype="multipart/form-data">

    <input type="hidden" id="itemId" name="itemId" value=""/>

    <div class="layui-form-item">
        <label class="layui-form-label">文件类型</label>
        <div class="layui-input-block">
            <select name="fileTypeId" id="fileType">
                <option>--请选择--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否公开</label>
        <div class="layui-col-md12">
            <input type="checkbox" name="fileState" lay-filter="switchTest" lay-skin="switch" lay-text="公开|未公开">
        </div>
    </div>


        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="test-upload-change">上传文件</button>
                    <p style="color: red;">仅支持上传文件大小为20MB</p>
                </div>
            </div>
        </div>



    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文件备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="fileContent"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1" id="test-upload-change-action">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>



<script th:src="@{/myconfig/bootstrap/js/jquery.js}"></script>
<script th:src="@{/myconfig/layui/layui.js}"></script>
<script th:src="@{/itemAndTask/js/jquery.params.js}"></script>

<script>

    //获取事项ID
    var itemId=$.query.get("ItemId");
    document.getElementById("itemId").value = itemId;


    layui.use(['form', 'layedit', 'laydate','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,upload = layui.upload
            ,$ = layui.$;


        //选完文件后不自动上传
        upload.render({
            elem: '#test-upload-change'
            ,url: 'fileoper/upload'
            ,auto: false
            ,accept:'file'
            //,multiple: true
            ,bindAction: '#test-upload-change-action'
            ,done: function(res){
                console.log(res)
            }
            ,success:function (res) {
                //alert(res.message);
            }
        });

        //文件类型
        function queryFileType() {
            layui.use('table',function () {
                var $ = layui.$;
                $.ajax({
                    url: 'fileshow/findFileType',
                    type: "get",
                    success: function (result) {
                        var selectId = document.getElementById("fileType");
                        for (var i =0;i<result.length;i++){
                            var option1 =document.createElement("option");
                            option1.setAttribute("value",result[i].fileTypeId);
                            option1.innerText = result[i].typeName;
                            selectId.appendChild(option1);
                            layui.form.render('select');
                        }
                    }
                });
            })
        }
        queryFileType();

        //监听提交
        form.on('submit(demo1)', function(data){
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })*/
            if (data.field.fileState == 'on'){
                data.field.fileState = '公开';
            } else{
                data.field.fileState = '未公开';
            }

            $.ajax({
                type:'post'
                ,url:'fileoper/addFile'
                ,data:data.field
                ,success:function (data,index) {
                    layer.msg(data.message,{icon:6},function () {
                        window.parent.location.reload();
                        parent.layer.close(index);
                    })
                }
            });
            return false;
        });


    });

</script>
</body>
</html>